<template>
  <div class="index" style="background-color: #efefef">

    <!-- banner -->
    <div class="banner">

    </div>
    <!-- menu -->
    <div class="menu">
      <div class="container">
        <div class="cell"
             @click="clickClient">
          <img src="../assets/img/我的客户.png" alt="">
          <div>
            <h2>我的客户</h2>
            <h2>My Clients</h2>
          </div>
        </div>

        <div class="cell">
          <img src="../assets/img/客户关怀.png" alt="" style="margin-top: 17px">
          <div style="margin-top: 22px">
            <h2>客户关怀</h2>
            <h2>My Clients</h2>
          </div>
        </div>

        <div class="cell" @click="$router.push('/message')">
          <img src="../assets/img/消息中心.png" alt="">
          <div>
            <h2>信息中心</h2>
            <h2>My Clients</h2>
          </div>
        </div>

        <div class="cell" @click="$router.push('/orders/allOrders')">
          <img src="../assets/img/物流单.png" alt="">
          <div style="margin-top: 22px">
            <h2>物流单</h2>
            <h2>My Clients</h2>
          </div>
        </div>
      </div>
    </div>

    <!-- tabBar -->
    <div class="tabBar">
      <div class="system_function"
           >
        <svg class="icon" aria-hidden="true"
        >
          <use xlink:href="#icon-6"></use>
        </svg>
        <!-- 这样使用没有颜色 -->
        <!--<span class="iconfont icon-6"></span>-->
        <span>系统功能</span>
      </div>
      <div class="user">
        <svg class="icon" aria-hidden="true"
        >
          <use xlink:href="#icon-6"></use>
        </svg>
        <!-- 这样使用没有颜色 -->
        <!--<span class="iconfont icon-6"></span>-->
        <span>个人中心</span>
      </div>
      <div class="message">
        <svg class="icon" aria-hidden="true"
        >
          <use xlink:href="#icon-6"></use>
        </svg>
        <!-- 这样使用没有颜色 -->
        <!--<span class="iconfont icon-6"></span>-->
        <span>联系</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    clickClient() {
      this.$router.push("/client");
    }
  }

}
</script>

<style lang="less" scoped>
.index {
  font-size: 0.18rem;
  position: relative;
  height: 100vh;
}

.banner {
  height: 200px;
  background-color: rgb(12,54,147);
}

//menu
.menu {
  padding-bottom: 80px;

  .container {
    width: 310px;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .cell {
      img {
        width: 50%;
      }

      margin-bottom: 10px;
      background-color: #ffffff;
      width: 150px;
      height: 200px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
    }
  }
}


//tabBar
.tabBar {
  height: 80px;
  width: 100%;
  color: #7e7b7b;
  //background-color: #2c3e50;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
}

.user, .system_function, .message {
  margin: 0 10vw;
  box-sizing: border-box;
  width: 50vw;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

.message {
  color: #fff;
  margin: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 5px solid #efefef;
  border-radius: 50% 50%;
  top: -50%;
  background-color: rgb(248,208,85);
  span {
    margin-top: -10px;
  }
}

.icon {
  height: 0.36rem;
  width: 0.36rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


</style>
